<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<canvas id="myCanvas" width="500" height="240" style="border:solid 1px #93FB40;"></canvas>
<script type="text/javascript">

var globalId;
var i=0;
function draw(id)
{
    globalId=id;
    setInterval(Composite,1000);
}
function Composite() 
{  
    var canvas = document.getElementById(globalId);  
    if (canvas == null)  
        return false;  
    var context = canvas.getContext('2d'); 
    var oprtns = new Array(
    "source-atop",
    "source-in",
    "source-out",
    "source-over",
    "destination-atop",
    "destination-in",
    "destination-out",
    "destination-over",
    "lighter",
    "copy",
    "xor"
    );
    if(i>10) i=0;
    context.clearRect(0,0,canvas.width,canvas.height);
    context.save();
	context.font="30px Georgia";
	context.fillText(oprtns[i],240,130);
    //绘制原有图形（蓝色长方形）
    context.fillStyle = "blue";
    context.fillRect(0, 0, 100, 100);
    //设置组合方式 
    context.globalCompositeOperation = oprtns[i];
    //设置新图形（红色圆形）
    context.beginPath();
    context.fillStyle = "red";
    context.arc(100, 100, 100, 0, Math.PI*2, false);
    context.fill();
	
	
    context.restore();
    i=i+1;
}
draw("myCanvas")

</script>



</body>
</html> 
